<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  name: "App",
  data() {
    return{
      timer:null,
      screen_height:0
    }
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.screen_height = document.body.getBoundingClientRect().height
    });
  },
  methods:{
    ...mapMutations(["setScreenHeight"])
  },
  watch:{
    'screen_height':{
      handler:function(newVal,OldVal){
        if(this.timer){
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(()=>{
          this.setScreenHeight(newVal)
        },300)
      }
    }
  }
};
</script>

<style lang="less">
.size {
  width: 100%;
  min-width: 1400px;
  height: 100%;
}
html,
body {
  .size;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
  background: #fff;
}
#app {
  .size;
}
</style>
<style>
/* ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 1);
} */
</style>
